<template>
  <div>
    <h1>watch监视 情况三 ：监视【reactive】定义的【对象类型】数据</h1>
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changePerson">修改person</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 18,
});
function changeAge() {
  person.age += 1;
}
function changeName() {
  person.name += "~";
}
function changePerson() {
   Object.assign(person,{name:'王五',age:20})
}
//reactive定义的对象类型数据,watch监视时,默认开启深度监视，且无法关闭，newValue和oldValue也是相同的
const stopWatch = watch(
  person,
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
  }
);
</script>
<style>

</style>